<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebStack</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2681745_k0zz6odeb4n.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Lato', sans-serif;
            background-color: #ddd;
            overflow-x: hidden;
            position: relative;
        }
        
        a {
            text-decoration: none
        }
        
        .container {
            background-color: #fff;
            position: relative;
            width: 100vw;
            height: 100vh;
            transform-origin: left top;
            transition: all 0.3s linear;
            display: flex;
            flex-wrap: wrap;
            position: relative;
            animation: gradient 20s ease-in-out infinite;
        }
        /* 旋转动作 */
        
        .container.show-nav {
            transform: rotate(-20deg);
        }
        
        .container.show-nav .circle {
            transition: all 0.2s ease-in;
            transform: rotate(-75deg);
        }
        
        .container.show-nav+nav li {
            transform: translate(0);
            transition: all 0.2s ease-in 0.1s;
        }
        
        img {
            width: 800px;
            height: 600px;
        }
        
        .circle-container {
            width: 100px;
            height: 100px;
            position: fixed;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
        }
        
        .circle {
            position: realtive;
            width: 100%;
            height: 100%;
            background-color: rgb(74, 194, 241);
            border-radius: 50%;
        }
        
        .circle button {
            outline: none;
            border: none;
            width: 35px;
            height: 35px;
            font-size: 35px;
            color: #fff;
            cursor: pointer;
            background-color: transparent;
            position: absolute;
            left: 50%;
            top: 50%;
        }
        
        button.close {
            transform-origin: top left;
            transform: rotate(90deg);
            transition: transform 0.3s linear 0.1s;
        }
        
        ul {
            list-style: none;
            position: fixed;
            top: 45%;
            left: 1%;
            color: rgb(58, 158, 224);
            font-weight: 600;
            z-index: 999;
        }
        
        ul>li {
            margin-top: 30px 0;
            font-size: 20px;
            transform: translate(-120%);
        }
        
        ul>li:nth-child(2) {
            margin: 30px 0 0 15px;
            transform: translate(-150%);
        }
        
        ul>li:nth-child(3) {
            margin: 30px 0 0 25px;
            transform: translate(-200%);
        }
        
        @keyframes gradient {
            0% {
                background: linear-gradient(45deg, rgba(29, 210, 255, 0.5), rgba(29, 165, 255, 0.5));
                background-size: 100%;
                background-position: center;
            }
            25% {
                background: linear-gradient(45deg, rgba(29, 210, 255, 0.5), rgba(29, 165, 255, 0.5));
                background-size: 1%;
                background-position: left;
            }
            50% {
                background: linear-gradient(45deg, rgba(29, 210, 255, 0.5), rgba(29, 165, 255, 0.5));
                background-size: 100%;
            }
            75% {
                background: linear-gradient(45deg, rgba(29, 210, 255, 0.5), rgba(29, 165, 255, 0.5));
                background-size: 1%;
                background-position: right;
            }
            100% {
                background: linear-gradient(45deg, rgba(29, 210, 255, 0.5), rgba(29, 165, 255, 0.5));
                background-size: 100%;
                background-position: center;
            }
        }
        
        .leftbox,
        .centerbox,
        .rightbox {
            width: 33%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }
        
        .boli {
            width: 50%;
            height: 20%;
            border-radius: 15px;
            /* 设置渐变 */
            background: linear-gradient( to right bottom, rgba(255, 255, 255, .6), rgba(255, 255, 255, .3), rgba(255, 255, 255, .2));
            /* 重点：使元素背景模糊化 */
            backdrop-filter: blur(11px);
            /* 设置上高光和左高光，使其看起来更加逼真 */
            border-top: 1px solid rgba(255, 255, 255, .8);
            border-left: 1px solid rgba(255, 255, 255, .8);
            display: flex;
            justify-content: space-around;
            align-items: center;
            cursor: pointer;
            transform: all .5s linear;
            overflow: hidden;
        }
        
        .boli:hover {
            transform: rotateX(15deg);
            box-shadow: 0 10px 10px #ddd;
        }
        
        .webimg {
            width: 95%;
            height: 95%;
            display: block;
            border-radius: 50%;
            box-sizing: border-box;
        }
        
        .webimg :hover {
            transform: rotate(180deg);
            transition: all 0.3s;
        }
        
        .webname {
            width: 55%;
            height: 60%;
            display: block;
            color: #3b5fca;
            font-size: 20px;
            font-weight: 700;
        }
        
        .webimga {
            width: 35%;
            height: 60%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            transition: all 0.5s;
        }
        
        .webimga:hover {
            box-shadow: 0 0 3px #ddd;
            border: 2px solid skyblue;
            transform: rotate(360deg);
        }
        
        .webname span {
            /* color: #be9911; */
            color: #4393e4;
            font-size: 15px;
            display: block;
            padding-right: 5px;
            margin: 10px 0;
            font-weight: 400;
            /* 超过两行溢出隐藏 */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        /* 中间 */
        
        .board {
            position: relative;
            width: 100%;
            height: 50%;
            border: #fff 10px solid;
            background-color: rgb(120, 140, 200);
            border-radius: 20px;
            overflow: hidden;
        }
        
        .info {
            position: absolute;
            width: 40%;
            height: 85%;
            left: 0;
            margin: 75px 20px;
            transition: 1s;
            z-index: 10;
        }
        
        .info h2 {
            text-decoration: none;
            color: #fff;
            font: 900 28px '';
        }
        
        .info h3 {
            /* 鼠标放开时的动画，第一个值是动画的过渡时间
            第二个值是延迟一秒后执行动画 */
            transition: .5s 1s;
            opacity: 0;
            margin-left: 20%;
            color: rgb(30, 210, 200);
        }
        
        .info span {
            transition: .5s 1s;
            color: #fff;
            font: 500 15px '';
            position: absolute;
            top: 70px;
        }
        
        .c {
            position: absolute;
            top: -210px;
            right: -240px;
        }
        
        .d,
        .e1 {
            position: absolute;
            right: calc(var(--i)*90px);
            width: calc(var(--w)*30px);
            height: 450px;
            overflow: hidden;
            border-radius: 100px;
            transform: rotateZ(220deg) translate(0, 0);
            background: rgb(236, 214, 85);
            transition: .5s .5s;
        }
        
        .d:nth-child(3) {
            background: rgb(106, 188, 226);
        }
        
        .d:nth-child(2) {
            background: rgb(240, 190, 230);
        }
        
        .d:nth-child(1) {
            background: rgb(231, 157, 157);
        }
        
        .e1 {
            left: -430px;
            top: -120px;
            width: 50px;
            background-color: rgb(131, 235, 179);
        }
        
        .board:hover .c div {
            /* 设置延迟动画 */
            transition: .5s calc(var(--i)*.1s);
            /* 移动的轨迹 */
            transform: rotateZ(220deg) translate(-200px, 400px);
        }
        
        .board:hover .info {
            transition: 1s .5s;
            left: 260px;
        }
        
        .board:hover .info h2 {
            transition: 1s .5s;
        }
        
        .board:hover .fr {
            transition: 1s .5s;
        }
        
        .board:hover .info h3 {
            margin-top: 20%;
            font-size: 15px;
            margin-left: 20%;
            transition: 1s .5s;
            opacity: 1;
        }
        
        .f {
            width: 40%;
            height: 55%;
            position: absolute;
            margin: 15% 10%;
            opacity: 0;
            transition: .5s;
        }
        
        .board:hover .f {
            transition: all 1s 1s;
            opacity: 1;
        }
        
        .fr {
            margin-top: 30%;
            float: right;
        }
        
        .avtar {
            width: 90%;
            height: 90%;
        }
        .centerlink{
			display:block;
			width:100%;
			height:100%;

		}
		/* .centerbox{
			justify-content: center;
		} */
        @media screen and (max-width: 800px) {
            body {
                height: 150vh;
                background-color: #ddd;
                animation: gradient 20s ease-in-out infinite;
            }
            .container {
                width: 100vw;
                height: 100vh;
                display: flex;
                justify-content: center;
            }
            .centerbox {
                order: -1;
                width: 80%;
                height: 50%;
            }
            .leftbox,
            .rightbox {
                width: 50%;
            }
            .boli {
                width: 89%;
                height: 15%;
            }
            .board {
                height: 65%;
            }
            .board:hover .info {
                transition: 1s .5s;
                left: 50%;
            }
            .c {
                position: absolute;
                top: -300px;
                right: -300px;
            }
            h2.fr {
                margin-top: 10%;
                font-size: 20px;
            }
            .info {
                margin: 50px 20px;
                position: absolute;
                z-index: 10;
            }
            .board:hover .info h3 {
                margin-left: 8px;
                margin-top: 17%;
            }
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="circle-container">
            <div class="circle">
                <button class="iconfont icon-quxiao close"></button>
                <button class="iconfont icon-caidan open"></button>
            </div>
        </div>

        <div class="leftbox">
            <div class="boli">
                <a href="https://cn.vuejs.org/index.html" class="webimga"> <img class="webimg" src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20210717222144.png" /></a>
                <a class="webname" href="https://cn.vuejs.org/index.html">
                    <p>VUE</p>
                    <span>渐进式JavaScript框架</span>
                </a>
            </div>

            <div class="boli">
                <a class="webimga" href="https://react.docschina.org/"> <img class="webimg" src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20210717221901.png" /></a>
                <a class="webname" href="https://react.docschina.org/">
                    <p>React</p>
                    <span>用于构建用户界面的 JavaScript 库</span>
                </a>
            </div>
            <div class="boli">
                <a class="webimga" href="https://angular.cn/"> <img class="webimg" src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20210717223257.png" /></a>
                <a class="webname" href="https://angular.cn/">
                    <p>Angular</p>
                    <span>Google应用设计框架与开发平台</span>
                </a>
            </div>
            <div class="boli">
                <a class="webimga" href="https://zh.javascript.info/"> <img class="webimg" src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20210717222738.png" /></a>
                <a class="webname" href="https://zh.javascript.info/">
                    <p>JS教程</p>
                    <span>从基础到高阶的 JavaScript 相关知识</span>
                </a>
            </div>


        </div>
		
        <div class="centerbox">
		
            <div class="board">
				<a href="https://codingfxj.github.io/" class='centerlink'>
                <div class="info">
                    <h2> 欢迎来到</h2>
                    <h3>CodingFXJ's</h3>
                    <h2 class="fr"> WebStack</h2>
                </div>
                <div class="c">
                    <!--i是用来计算平面圆柱的动效延迟和距离的 --w则是用来计算平面圆柱的宽度 -->
                    <div class="d" style="--i:2;--w:1.6"></div>
                    <div class="d" style="--i:4;--w:1.7"></div>
                    <div class="d" style="--i:1;--w:1.6"></div>
                    <div class="d" style="--i:3;--w:1.4"></div>
                    <div class="e1" style="--i:1"></div>
                </div>
                <!-- 设置二维码 -->
                <div class="f">
                    <img class="avtar" src="https://gitee.com/GiteeFXJ/picstore/raw/master/codepic/20210629164159.jpg" />
                </div>
				</a>
            </div>
			
        </div>
        <div class="rightbox">

            <div class="boli">
                <a class="webimga" href="https://juejin.cn/"> <img class="webimg" src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg" /></a>
                <a class="webname" href="https://juejin.cn/">
                    <p>掘金</p>
                    <span> 代码不止,掘金不停</span>
                </a>
            </div>
            <div class="boli">
                <a class="webimga" href="https://segmentfault.com/"> <img class="webimg" src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20210717223134.png" /></a>
                <a class="webname" href="https://segmentfault.com/">
                    <p>思否</p>
                    <span>中国领先的开发者技术交流社区</span>
                </a>
            </div>
            <div class="boli">
                <a class="webimga" href="https://www.jianshu.com/"> <img class="webimg" src="https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20210717224014.png" /></a>
                <a class="webname" href="https://www.jianshu.com/">
                    <p>简书</p>
                    <span>优质的创作社区</span>
                </a>
            </div>
            <div class="boli">
                <a class="webimga" href="https://www.cnblogs.com/"> <img class="webimg" src=" https://gitee.com/GiteeFXJ/picstore/raw/master/pics/20210717223503.png" /></a>
                <a class="webname" href="https://www.cnblogs.com/">
                    <p>博客园</p>
                    <span>面向开发者的知识分享社区</span>
                </a>
            </div>

        </div>
    </div>
    </div>
    <nav>
        <ul>

            <li> <a href="javascript:void(0)" onclick="goTo('index.html')"><i class="iconfont icon-HOMEMESSAGE"></i> HOME</a></li>
            <li><a href="javascript:void(0)" onclick="goTo('tools.html')"><i class="iconfont icon-Tools"></i> TOOL</a></li>
            <li><a href="javascript:void(0)" onclick="goTo('echart.html')"><i class="iconfont icon-more"></i> MORE</a></li>
            <!-- <li> <a href="index.html"><i class="iconfont icon-HOMEMESSAGE"></i> HOME</a></li>
            <li><a href="tools.html"><i class="iconfont icon-Tools"></i> TOOL</a></li>
            <li><a href="javascript:;"><i class="iconfont icon-more"></i> MORE</a></li> -->
        </ul>
    </nav>

    <script>
        let closebtn = document.querySelector('.close');
        let openbtn = document.querySelector('.open');
        let container = document.querySelector('.container')
        openbtn.addEventListener('click', function() {
            container.classList.add('show-nav')
        })
        closebtn.addEventListener('click', function() {
            container.classList.remove('show-nav')
        })

        function goTo(url) {
            window.location.href = url;
        }
    </script>
</body>

</html>